<template>
    <div>
        <h1>{{ $t('views.index.blurb.title') }}</h1>
        <p class="topText">
            <span>{{ $t('views.index.blurb.title1') }}</span><br />
            <span>{{ $t('views.index.blurb.title2') }}</span>
        </p>
        <hr />
        <p class="bottomText">
            <span>{{ $t('views.index.blurb.text') }}</span><br />
            <span>{{ $t('views.index.blurb.text1') }}</span><br />
            <span>{{ $t('views.index.blurb.text2') }}</span><br />
            <span>{{ $t('views.index.blurb.text3') }}</span><br />
            <span>{{ $t('views.index.blurb.text4') }}</span><br />
            <br />
            <span>{{ $t('views.index.blurb.text5') }}</span><br />
            <span>{{ $t('views.index.blurb.text6') }}</span><br />
            <span>{{ $t('views.index.blurb.text7') }}</span><br />
            <span>{{ $t('views.index.blurb.text8') }}</span><br />

        </p>
    </div>
</template>

<style lang="scss" scoped>
h1 {
    // font-family: Alimama ShuHeiTi;
    font-weight: bold;
    font-size: 60px;
    color: #FFFFFF;
    line-height: 56px;
    margin-top: 100px;
    margin-bottom: 35px;
}

p {
    color: #FFFFFF;

    &.topText {
        // font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 16px;
        line-height: 24px;
    }

    &.bottomText {
        // font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        line-height: 30px;
    }
}

hr {
    width: 100%;
    border: none;
    border-top: 1px dotted #FFFFFF;
    // background: none;
    opacity: 0.1;
    margin: 38px 0;

}
</style>
